<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 合同领用
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-select v-model="query.contractType" placeholder="合同类别" class="handle-selectmr10" style='width: 130px'>
                <el-option key="0" label="请选择" value=""></el-option>
                <el-option key="1" label="刑事案件" value="刑事案件"></el-option>
                <el-option key="2" label="民事案件" value="民事案件"></el-option>
                <el-option key="3" label="行政案件" value="行政案件"></el-option>
                <el-option key="4" label="经济案件" value="经济案件"></el-option>
            </el-select>
            <el-input v-model="query.contractName" placeholder="合同名称" class="handle-inputmr10" style='width: 200px;'></el-input>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
        <div class="container">
            <div class="card-row">
                <div v-for="contract in currentPageContracts" :key="contract.cancellationId" @mouseover="hoverEffect(true, contract.cancellationId)" @mouseout="hoverEffect(false, contract.cancellationId)">
                    <div class="card">
                        <h3>合同编号: <span class="key-color">{{ contract.cancellationId }}</span></h3>
                        <p>名称: <span class="key-color">{{ contract.contractName }}</span></p>
                        <p>合同类型: <span class="key-color">{{ contract.contractType }}</span></p>
                        <p>律师: <span class="key-color">{{ contract.lawyerName }}</span></p>
                        <p><span class="color">取消原因: </span>{{ contract.cancellationReason }}</p>
                        <p><span class="color">注销日期: </span>{{ contract.cancellationDate }}</p>
                        <p>经办人: <span class="key-color">{{ contract.operator }}</span></p>
                        <p>备注: <span class="key-color">{{ contract.remarks }}</span></p>
                        <button @click="restartContract(contract.contractName)">重新启动合同</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="query.pageIndex"
                :page-size="query.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import {getCancelContract} from "../../api/contract"
import {reStart} from "../../api/contract"
export default {
    name: 'ContractTwo',
    data() {
        return {

            /*条件查询*/
            query: {
                contractType:"",
                contractName:"",
                page: 1,
                pageSize: 10
            },
            canceledContracts: [],
            itemsPerPage: 5,
            currentPage: 1,
            hoveredCardId: null,
            // idx: -1,//弹框时告诉修改/删除第几行
            // id: -1
        };
    },
    computed: {
        totalPages() {
            return Math.ceil(this.canceledContracts.length / this.itemsPerPage);
        },
        currentPageContracts() {
            const start = (this.currentPage - 1) * this.itemsPerPage;
            const end = start + this.itemsPerPage;
            return this.canceledContracts.slice(start, end);
        }
    },
    created() {
        this.getData();
    },
    methods: {
        hoverEffect(isHovered, cardId) {
            if (isHovered) {
                this.hoveredCardId = cardId;
            } else {
                this.hoveredCardId = null;
            }
        },
        restartContract(name) {
            console.log(name);
            reStart(name).then(res=>{
                if(res.code==200) {
                    this.$message.success("合同重启成功")
                    this.getData()
                }
                else {
                    this.$message.error("重启失败")
                }
            })
            // this.canceledContracts = this.canceledContracts.filter(contract => contract.cancellationId!== id);
        },
        getData() {
            getCancelContract(this.query).then(res=>{
                console.log(res);
                if(res.code == 200) {
                    this.canceledContracts = res.data;
                    this.pageTotal = res.pageTotal || 50;
                }
                else {
                    this.$message.error(res.msg);
                }
            })
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },

        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.crumbs {
    margin-bottom: 20px;
}

.handle-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.handle-selectmr10,
.handle-inputmr10 {
    margin-right: 10px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.color{
    color: #d30e0e;
}
.card {
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 90%;
    height: 250px;
    margin-bottom: 30px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
}

.highlight {
    font-weight: bold;
    color: #007bff;
}

.pagination {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card button {
    margin-top: 10px;
}

.card.removed {
    animation: fadeOut 0.5s ease forwards;
}

.key-color {
    color: #007bff;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
</style>
